<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <Echart id="leftCenter" v-if="pageflag" :options="options" isClick class="left_center_inner" ref="charts"
    height="180px" @chartClick="chartClick" style="margin-top: -10px" />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';
import { colorsC, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { graphic } from 'echarts';

export default {
  data() {
    return {
      options: {},
      tag: 1,
      countUserNumData: {
        axisData: ['2021', '2022', '2023', '2024', '2025'],
        seriesData: [142361, 146289, 153728, 161825, 18979],
      },
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;

      this.$nextTick(() => {
        this.init(this.countUserNumData);
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
        );
      });
    },
    init(currentData) {
      // let axisData = ["2021年", "2022年", "2023年", "2024年"];
      let axisData = currentData.axisData;
      let seriesData = [
        [...currentData.seriesData]
      ];

      const options = {
        // backgroundColor: "#0F224C", //背景色
        grid: {
          top: '15%',
          left: '4%',
          right: '8%',
          bottom: '0%',
          containLabel: true,
        },
        tooltip: {
          backgroundColor: "#033b77",
          borderColor: "#033b77",
          textStyle: {
            color: "#fff",
            fontSize: 13,
          },
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return params[0].value + '万元';
          }
        },
        legend: {
          show: true,
          top: '0',
          right: '4%',
          icon: 'circle',
          // itemWidth: 12,
          // itemHeight: 12,
          // itemGap: 60,
          textStyle: legend.textStyle,
          data: ['万元', '吨位'],
        },
        xAxis: {
          type: 'category',
          data: axisData,
          // boundaryGap: false,
          boundaryGap: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, // 不显示下切线
          },
          axisLabel: xAxis.axisLabel,
          axisLine: {
            lineStyle: {
              background: 'rgba(176, 215, 255, 0.4)',
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            // max: 100,
            // // min: 20, //
            // interval: 20,
            axisLabel: yAxis.axisLabel,
            axisLine: {
              show: false,
              // interval: 11,
              lineStyle: {
                color: 'rgba(0,0,0,0.5)',
              },
            },
            splitLine: {
              show: true,
              // interval: 1,
              lineStyle: {
                color: ['rgba(176, 215, 255, 0.2)'],
                width: 1,
                type: 'dashed',
              },
            },
            // splitLine: {
            //   show: false,
            // },
            axisTick: {
              show: false,
            },
          },
        ],
        color: ['#1EE7E7', '#1890FF'],
        series: [],
      };
      const series = [
        {
          name: '万元',
          type: 'pictorialBar',
          barCategoryGap: '50%',
          symbol: 'triangle',
          itemStyle: {
            normal: {
              opacity: 0.5
            },
            emphasis: {
              opacity: 1
            },
          },
          data: seriesData[0],
          z: 10
        },
        {
          name: 'glyph',
          type: 'pictorialBar',
          barGap: '-100%', //交叉位置占比
          symbolPosition: 'end',
          symbolSize: 10,
          symbolOffset: [0, '-120%'],

        }
        // {
        //   name: '运费总额',
        //   type: 'bar',
        //   // 动画配置
        //   animation: true,
        //   animationDuration: 2000,
        //   animationEasing: 'quarticInOut',
        //   animationDelay: function (idx) {
        //     return idx * 150;
        //   },
        //   smooth: true,
        //   showSymbol: false,
        //   symbol: 'triangle',
        //   // symbol: 'circle',
        //   // symbolSize: 6,
        //   // barGap: '-30%',
        //   barWidth: 44,
        //   data: seriesData[0],
        //   itemStyle: {
        //     normal: {
        //       color: colorsC[0],
        //     },
        //   },
        //   // areaStyle: {
        //   //   color: colorsB[1],
        //   // },
        //   lineStyle: {
        //     normal: {
        //       width: 1,
        //     },
        //   },
        //   label: {
        //     show: false,
        //     position: 'top',
        //     formatter: (par) => {
        //       return par.value + '';
        //     },
        //     textStyle: { fontSize: 12, color: '#FFF' },
        //   },
        //   markPoint: {
        //     symbol: 'circle',
        //     symbolSize: [14, 14], // 容器大小
        //     symbolOffset: ['0%', '0%'],
        //     // data: [
        //     //   {
        //     //     name: '最大值',
        //     //     type: 'max',
        //     //     valueIndex: 1,
        //     //   },
        //     // ],
        //     label: {
        //       show: true,
        //       position: 'top',
        //       fontSize: 12,
        //       color: '#FFF',
        //       formatter: (par) => {
        //         return par.value + '';
        //       },
        //     },
        //   },
        // },
      ];
      options.series = series;
      this.options = options;
    },
    chartClick(params) {
      // 这里处理你的点击逻辑
      this.$emit('chartClick', params, '', 'LeftLeftTop');
    },
  },
};
</script>
<style lang="scss" scoped></style>
